<template>
	<view>
		<uni-search-bar @clear="handleClear" @confirm="handleConfirm" v-model="q"
			placeholder="请输入搜索关键字"></uni-search-bar>
		<scroll-view scroll-x class="title">
			<view class="title-box">
				<view v-for="(item,index) in title" :key="index" class="text" :class="{ active: index === activeIndex }"
					@click="activeIndex=index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="filters">
			<uni-data-select :clear="false" v-model="price" :localdata="priceRange" @change="priceChange"
				class="select"></uni-data-select>
			<uni-data-select :clear="false" v-model="sell" :localdata="sellRange" @change="priceChange"
				class="select"></uni-data-select>
		</view>

		<navigator :url="'/pages/detail/detail?id=' + item.id" v-for="(item, index) in list" :key="index">
			<list-item :item="item"></list-item>
		</navigator>
		<view class="pull-down-finish" v-show="isFinished">没有更多数据了</view>
	</view>
</template>

<script>
	import {
		computed,
		watch
	} from "vue";
	import {
		request
	} from '../../utils/index.js';

	import carMixins from '../../mixins/car.mixins.js'
	export default {
		mixins: [carMixins],
		methods: {
			async getList() {
				// 获取查询参数
				const data = {
					q: this.q,
					type: this.title[this.activeIndex],
					_page: this.page,
				}
				// 处理查询参数
				if (!data.q) delete data.q
				if (!data.type || data.type === '全部') delete data.type
				// 筛选排序
				if (this.price) {
					data._sort = 'price'
					data._order = this.price
				}
				if (this.sell) {
					data._sort += ',sell'
					data._order += ',' + this.sell
				}
				// 发送请求
				const resp = await request({
					url: 'http://localhost:3000/list',
					data,
				})
				// 保存数据
				if (this.page === 1) {
					this.list = resp.data
				} else {
					this.list = this.list.concat(resp.data)
				}
				// 条件编译
				// #ifdef MP-WEIXIN
				this.qwer = resp.header['X-Total-Count']
				// #endif
				// #ifdef H5
				this.qwer = resp.header['x-total-count']
				// #endif
			},
			async getTitle() {
				const resp = await request({
					url: 'http://localhost:3000/title'
				})
				this.title = ['全部', ...resp.data]
			},
			handleClear() {
				this.q = '';
				this.page = 1;
				this.getList()
			},
			handleConfirm() {
				this.page = 1;
				this.getList()
			},
			priceChange(e) {
				this.page = 1;
				this.getList();
			}
		},
		data() {
			return {
				// 数据列表
				list: [],
				// 搜索的数据
				q: '',
				// 标题数据
				title: [],
				// 当前选中的标题高亮下表
				activeIndex: 0,
				// 当前页码
				page: 1,
				// 当前数据总量
				qwer: 0,
				// 排序
				sort: ['price', 'sell'],
				order: ['asc', 'desc'],
				price: 0,
				sell: 0,
				priceRange: [{
						value: 0,
						text: "默认排序"
					},
					{
						value: "asc",
						text: "按价格升序"
					},
					{
						value: 'desc',
						text: "按价格降序"
					},
				],
				sellRange: [{
						value: 0,
						text: "默认排序"
					},
					{
						value: "asc",
						text: "按销售升序"
					},
					{
						value: 'desc',
						text: "按销售降序"
					},
				],
			}
		},
		onLoad() {
			this.getList();
			this.getTitle();
		},
		onReachBottom() {
			if (this.isFinished) return;
			this.page++;
			this.getList()
		},
		watch: {
			activeIndex: {
				handler() {
					this.page = 1
					this.getList();
				}
			},
		},
		computed: {
			isFinished() {
				return this.qwer <= this.list.length
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		display: flex;
		flex-wrap: nowrap;
		height: 90upx;
		align-items: center;

		.text {
			margin: 0 20upx;
			white-space: nowrap;

			&.active {
				color: red;
			}
		}
	}

	.pull-down-finish {
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filters {
		display: flex;

		.select {
			flex: 1;
		}
	}
</style>